<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ page.title }}</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.27.4/tocbot.css">
    <link rel="stylesheet" href="default.css">
</head>
<body>

    <!-- Header -->
    <header class="header">
        <div class="logo">
            <div class="hamburger" id="hamburger">
                <div class="bar"></div>
                <div class="bar"></div>
                <div class="bar"></div>
            </div>

            <a href="/">Expensify</a>
            /
            <!-- Dropdown for product selection -->
            <div class="dropdown">
                <span>{{ page.title | remove_first: 'Expensify ' }}</span>
                <div class="dropdown-content">
                    <a href="/expense" class="{% if page.title == 'Expensify Expense' %}active{% endif %}">Expense</a>
                    <a href="/card" class="{% if page.title == 'Expensify Cards' %}active{% endif %}">Card</a>
                    <a href="/travel" class="{% if page.title == 'Expensify Travel' %}active{% endif %}">Travel</a>
                    <a href="/chat" class="{% if page.title == 'Expensify Chat' %}active{% endif %}">Chat</a>
                    <a href="/invoice" class="{% if page.title == 'Expensify Invoice' %}active{% endif %}">Invoice</a>
                    <a href="/billpay" class="{% if page.title == 'Expensify Billpay' %}active{% endif %}">Billpay</a>
                </div>
            </div>
        </div>
        <div id="search-container">
            <!-- Search Input styled as button -->
            <span id="search-icon" style="cursor: pointer; font-size: 24px;">🔍</span>

            <!-- Search Modal -->
            <div id="search-modal" style="display:none;">
                <div id="modal-content">
                    <div class="search-icon-wrapper">
                        <span class="search-icon">🔍</span>
                        <input type="text" id="search-input" placeholder="Go to..." />
                    </div>
                    <!-- Hidden Search Button -->
                    <button id="search-submit" style="display:none;">Search</button>

                    <!-- Search results container with tabindex to make it focusable -->
                    <div id="search-results" tabindex="0" style="display:none;"></div>

                    <!-- Footer with shortcut info -->
                    <div id="search-footer" style="text-align: center; margin-top: 10px; font-size: 14px; color: #586069;">
                        ⇵ Select, ↩ Go
                    </div>
                </div>
            </div>
        </div>
    </header>

    <!-- TOC Sidebar -->
    <nav class="toc-sidebar" id="toc-sidebar">
        <div class="js-toc"></div>
    </nav>

    <!-- Main Content -->
    <h1>{{ page.title }}</h1>
    <main class="js-toc-content">
        {{ content }}

        <!-- Spacer div for scrolling -->
        <div class="scroll-spacer"></div>
    </main>

    <!-- Footer -->
    <footer>
        <div class="footer-container">
            <div class="footer-column">
                <h3>Features</h3>
                <ul>
                    <li><a href="https://use.expensify.com/expense-management">Expense Management</a></li>
                    <li><a href="https://use.expensify.com/spend-management">Spend Management</a></li>
                    <li><a href="https://use.expensify.com/expense-reports">Expense Reports</a></li>
                    <li><a href="https://use.expensify.com/company-credit-card">Company Card</a></li>
                    <li><a href="https://use.expensify.com/receipt-scanning-app">Receipt Scanning App</a></li>
                    <li><a href="https://use.expensify.com/payments">Payments</a></li>
                    <li><a href="https://use.expensify.com/bill-pay-app">Bill Pay</a></li>
                    <li><a href="https://use.expensify.com/invoicing-software">Invoicing</a></li>
                    <li><a href="https://use.expensify.com/travel">Travel</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>Resources</h3>
                <ul>
                    <li><a href="https://use.expensify.com/accountants">ExpensifyApproved!</a></li>
                    <li><a href="https://use.expensify.com/press-kit">Press Kit</a></li>
                    <li><a href="https://use.expensify.com/support">Support</a></li>
                    <li><a href="https://help.expensify.com/">ExpensifyHelp</a></li>
                    <li><a href="https://www.expensify.com/terms">Terms of Service</a></li>
                    <li><a href="https://www.expensify.com/privacy">Privacy</a></li>
                    <li><a href="https://use.expensify.com/download">Expensify App</a></li>
                </ul>
            </div>
            <div class="footer-column">
                <h3>Learn more</h3>
                <ul>
                    <li><a href="https://we.are.expensify.com/how-we-got-here">About Expensify</a></li>
                    <li><a href="https://use.expensify.com/blog">Blog</a></li>
                    <li><a href="https://we.are.expensify.com/">Jobs</a></li>
                    <li><a href="https://www.expensify.org">Expensify.org</a></li>
                    <li><a href="https://ir.expensify.com">Investor Relations</a></li>
                </ul>
                <div class="social-icons">
                    <a href="https://www.twitter.com/expensify" title="Twitter">
                        <img src="https://img.icons8.com/material-outlined/24/000000/twitter.png" alt="Twitter">
                    </a>
                    <a href="http://www.instagram.com/expensify" title="Instagram">
                        <img src="https://img.icons8.com/material-outlined/24/000000/instagram-new.png" alt="Instagram">
                    </a>
                    <a href="https://www.facebook.com/expensify" title="Facebook">
                        <img src="https://img.icons8.com/material-outlined/24/000000/facebook.png" alt="Facebook">
                    </a>
                    <a href="http://www.linkedin.com/company/expensify" title="LinkedIn">
                        <img src="https://img.icons8.com/material-outlined/24/000000/linkedin.png" alt="LinkedIn">
                    </a>
                </div>
            </div>

            <div class="footer-column">
                <h3>Get Started</h3>
                <ul>
                    <li><a href="https://www.expensify.com">Create a new account</a></li>
                    <li><a href="https://www.expensify.com">Log in</a></li>
                    <li>
                        <a href="https://apps.apple.com/us/app/expensify-receipts-expenses/id471713959">
                            <img src="https://developer.apple.com/app-store/marketing/guidelines/images/badge-example-preferred_2x.png" width="100" alt="iOS App">
                        </a>
                    </li>
                    <li>
                        <a href="https://play.google.com/store/apps/details?id=org.me.mobiexpensifyg">
                            <img src="https://upload.wikimedia.org/wikipedia/commons/7/78/Google_Play_Store_badge_EN.svg" width="100" alt="Android App">
                        </a>
                    </li>
                </ul>
                <p>©2008-2024 Expensify, Inc.</p>
            </div>

            </div>
    </footer>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.32.1/tocbot.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/flexsearch@0.7.31/dist/flexsearch.bundle.js"></script>
    <script src="default.js"></script>

</body>
</html>